<template>
  <div id="DatavTable">
    <dv-scroll-board :config="config" ref="scrollBoard" style="width:100%;height:100%" />
  </div>
</template>

<script>
export default {
  name: "DatavTable",
  data() {
    return {
      // 配置
      config: {
        // 标头
        // header: ["时间", "事件"],
        // 数据
        data: [],
        // 是否开启序号
        index: true,
        // 宽度-按照顺序-不写就是平均分配
        columnWidth: [50, 130],
        // 居中方式
        align: ["center", "center", "center", "center"],
        // 滚动时间-每条
        waitTime: 2000,
        // 序号别名
        // indexHeader: "序号",
        // 表头
        // headerBGC:"",
        // 奇数行
        oddRowBGC: "#245EB9",
        // 偶数行
        evenRowBGC: "#135EA5",
        // 行数
        rowNum: "5"
      },
      // 定时器加载数据
      time: null,
      // datav数据刷新间隔
      datavNumber: 5,
      // datav下标
      datavIndex: 15,
      // 追加数据
      addlist: [],
      // 禁止鼠标悬浮暂停
      hoverPause: false
    };
  },
  created() {
    // 模拟调接口-等待data-html加载完毕-不然取不到数据会报错
    this.$nextTick(() => {
      this.doUpdate();
    });
  },
  methods: {
    // 测试方法-测试直接往config.data添加数据时，轮播表数据是否会刷新
    ceshi() {
      this.config.data.push(
        ["180天合力攻坚 再创项目建设新速度 木垒县250万千瓦风电项目实现接入并网"],
        ["2024年6月13日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年8月7日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年6月13日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年8月7日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年6月13日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年8月7日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年6月13日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年8月7日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年6月13日", "木垒县250万千瓦风电项目推进会召开"],
        ["2024年8月7日", "木垒县250万千瓦风电项目推进会召开"]
      );
      // 解决办法-1
      // 重新new一个对象-轮播数据确实更新了，
      // 缺点-没有衔接滚动，又从1开始滚动
      // this.config = { ...this.config }
      console.log("this.config.data", this.config.data);
    },
    doUpdate() {
      if (this.addlist.length < 10) {
        console.log("第一次");
        // 调用第一次接口赋值数据-模拟
        this.config.data = [
          ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
          ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
          ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
          ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
          ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
          ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
          ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
          ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
          ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
          ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
        ];
        // 记录数据-
        this.addlist = [
          ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
          ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
          ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
          ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
          ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
          ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
          ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
          ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
          ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
          ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
        ];
      }
      //   开始判断加载数据
      // console.log("this.config.data.length", this.config.data.length);
      // console.log("this.config.data", this.config.data);
      // console.log("this.addlist", this.addlist.length);

      // 第二次加载
      if (this.addlist.length > 10) {
        // console.log("第二次执行");
        // 刷新时间10次
        this.datavNumber = 10;
      }

      // 先清空-在触发
      // 不这样写，修改时间间隔后，定时器时间间隔不会修改
      clearInterval(this.time);
      this.time = setInterval(this.datavloaddata, 3500 * this.datavNumber);
    },
    // datav-添加数据方法
    datavloaddata() {
      // 页码加一
      // console.log("执行调接口-第二次");
      let a = [
        ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
        ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
        ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
        ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
        ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
        ["2025-05-26", "木垒县多个风电项目集控中心封顶，建设取得阶段性成果"],
        ["2024-08-27", "木垒县250万千瓦风电项目建设按下“快进键”"],
        ["2024-10-31", "预计年底并网发电！木垒县250万千瓦风电项目建设跑出“加速度”"],
        ["2024-10-18", "木垒县250万千瓦风电项目推进会召开"],
        ["2024-09-19", "木垒县举行250万千瓦风电项目变电站集控中心封顶仪式"],
      ];
      // 模拟调接口赋值数据-res.data - 轮播数据
      this.addlist = [...this.addlist, ...a];

      // 数据保存一份-没有什么作用
      // this.config.data = this.addlist

      // 开始轮播数据下标-建议传
      // 不传也可以-不会影响太大
      // 传的话就是添加数据开始每次数据长度-15 因为一屏可以显示5个，
      // 或者是第一次是5 每次加10 - 比较麻烦
      let c = this.addlist.length - this.datavIndex;
      // console.log("this.addlist.length", this.addlist.length);
      // console.log("this.datavIndex", this.datavIndex);
      // console.log("c", c);

      // 解决方法二-使用updateRows（）方法追加数据
      // 优点-无限追加数据-无缝衔接
      // 缺点-不能直接使用，需要代码触发（比如定时器）这个方法相当于一个缓存，并不会直接把数据更新到config里面
      // 就更element-table表格选中道理一样，必须先渲染数据表格，才能通过方法选中（直接写死是选中不了-可能没有标记）
      // this.$refs['scrollBoard'].updateRows(this.addlist,c)
      this.$refs["scrollBoard"].updateRows(this.addlist);

      // 配置数据-上面赋值了就会变，不赋值是不会变（因为updateRows（）方法-不会修改config里面数据）
      // console.log("this.config.data", this.config.data);
      // 执行下一次
      this.doUpdate();
    }
  },
  beforeDestroy() {
    // 在页面销毁后，清除计时器
    clearInterval(this.time);
  }
};
</script>

<style lang="scss" scoped>
#DatavTable {
  width: 100%;
  height: 100%;
}
</style>
